import { init } from 'snabbdom/init'
import { classModule } from 'snabbdom/modules/class'
import { propsModule } from 'snabbdom/modules/props'
import { styleModule } from 'snabbdom/modules/style'
import { eventListenersModule } from 'snabbdom/modules/eventlisteners'
// import { h } from 'snabbdom/h' // helper function for creating vnodes

import h from './mysnabbdom/h.js'
import patch from './mysnabbdom/patch.js';

// var patch = init([classModule, propsModule, styleModule, eventListenersModule])

// const myVnode = h('a',{
//   props:{
//     href:'http://baidu.com',
//     target:'_blank'
//   }
// }, '百度')

// const myVnode2 = h('ul',{}, [
//   h('li','西瓜'),
//   h('li','西瓜2'),
//   h('li','西瓜3'),
//   h('li',[
//     h('p', '哈哈'),
//     h('p','嘻嘻')
//   ]),
// ])
const myVNode1 = h('ul', {}, [
  h('li', { key: 'A' }, 'A'),
  h('li', {key:'B'}, 'B'),
  h('li', {key:'C'}, 'C'),
  // h('li', {key:'D'}, 'D'),
  // h('li', {key:'E'}, 'E')
])
let btn = document.getElementById('btn')
let container = document.getElementById('container')
patch(container, myVNode1)

const myVNode2 = h('ul', {}, [
  h('li', { key: 'N' }, 'NNN'),
  h('li', { key: 'A' }, 'AAAAA'),
  h('li', { key: 'B' }, 'BBB'),
  h('li', { key: 'C' }, 'CCC'),
  h('li', { key: 'D' }, 'D'),
])
btn.onclick = function() {
  patch(myVNode1, myVNode2)
}